{extend name="base" /}
{block name="body"}
<table class="layui-hide" id="ID-treeTable-demo"></table>
<script type="text/html" id="TPL-treeTable-demo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getChecked">获取选中数据</button>
  </div>
</script>

<!-- 表格操作列 -->
<script type="text/html" id="tableBarAuth">
    <a class="layui-btn layui-btn-sm ajax-iframe" href="{:url('authRule/add')}?pid={{d.id}}" data-width="400px" data-height="450px">添加子菜单</a>
    <a class="layui-btn layui-btn-sm ajax-iframe" href="{:url('authRule/edit')}?id={{d.id}}" data-width="400px" data-height="450px"><i class="layui-icon layui-icon-edit"></i>修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-sm ajax-delete" href="{:url('authRule/del')}?id={{d.id}}" tiptext="确认删除ID:{{d.id}}"><i class="layui-icon layui-icon-delete"></i>删除</a>
</script>
<!-- 权限列 -->
<script type="text/html" id="weigh">
    <input type="text" name="weigh" value="{{d.weigh}}" autocomplete="off" class="layui-input ajax-update" data-url="{:url('authRule/edit')}?id={{d.id}}">
</script>

<!-- 权限列 -->
<script type="text/html" id="status">
    <input type="checkbox" name="status" lay-skin="switch" lay-filter="*" lay-text="正常|锁定" data-url="{:url('authRule/edit')}?id={{d.id}}" {{d.status==1?'checked':''}}>
</script>

{/block}
{block name="js"}
<script>
layui.use(function(){
  var treeTable = layui.treeTable;
  var layer = layui.layer;
  var dropdown = layui.dropdown;
  // 渲染
  var inst = treeTable.render({
    elem: '#ID-treeTable-demo',
    url: "{:url('authRule/index_json')}", // 此处为静态模拟数据，实际使用时需换成真实接口
    
    tree: {
        customName:{name:"title",id:"id",pid:"pid"},
        data:{isSimpleData:true},
    },

    size:'lg',even:true,
    maxHeight: '501px',
    toolbar: '#TPL-treeTable-demo',
    cols: [[
                
      {type: 'checkbox', fixed: 'left'},
      {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'},
      {
                    field: 'title', 
                    title: '权限名称', 
                    width: 200
                }, {
                    field: 'url', 
                    title: '控制器',
                    width: 160,
                }, {
                    field: 'openType', 
                    title: '菜单类型', 
                    align: 'center', 
                    width: 180
                }, {
                    title: '排序号', 
                    align: 'center', 
                    width: 100,
                    templet:'#weigh'
                }, {
                    field: 'icons',
                    title: '图标', 
                    align: 'center', 
                    width: 100, templet: function (d) {
                        return d.icons = '<i class="layui-icon ' + d.icons + '"></i>';
                    }
                }, {
                    field: 'type', 
                    title: '类型', templet: function (d) {
                        return d.type =='1' ? '<span class="layui-btn layui-bg-cyan layui-btn-xs">菜单</span>' : '<span class="layui-btn layui-btn-xs layui-bg-red">按钮</span>';
                    }, 
                    align: 'center', 
                    width: 100
                }, {
                    align: 'center', 
                    width: 100,
                    title: '状态',
                    templet:'#status'
                }, {
                    templet: '#tableBarAuth', 
                    title: '操作', 
                    align: 'center', 
                    width: 310
                }
            ]],
    page: false,
  });

  // 表头工具栏工具事件
  treeTable.on("toolbar(ID-treeTable-demo)", function (obj) {
    var config = obj.config;
    var tableId = config.id;
    var status = treeTable.checkStatus(tableId);
    // 获取选中行
    if (obj.event === "getChecked") {
      if(!status.data.length) return layer.msg('无选中数据');
      console.log(status);
      layer.alert("当前数据选中已经输出到控制台，<br>您可按 F12 从控制台中查看结果。");
    }
  });
});
</script>
 
{/block}